<template>
  <div>
    <div class="search-container">
      <div class="search-inp-container">
        <el-input @keyup.enter.native="handleSearch" placeholder="输入姓名" v-model="listQuery.name" style="width: 170px" clearable>
        </el-input>
        <el-input @keyup.enter.native="handleSearch" placeholder="输入证件号" v-model="listQuery.cardId" style="width: 210px" clearable>
        </el-input>
        <el-input @keyup.enter.native="handleSearch" placeholder="输入手机号" v-model="listQuery.mobile" style="width: 170px" clearable>
        </el-input>
      </div>
      <el-button class="search-btn" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
      <el-button v-if="mall_customer_export" class="search-btn" type="primary" icon="el-icon-search"
                 @click="handleExport">导出
      </el-button>
      <!--<el-button class="search-btn" type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>-->
      <el-button class="search-btn" :autofocus="true" icon="el-icon-refresh" @click="refreshHandle">刷新</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row >

      <el-table-column align="center" prop="name" label="姓名" >
      </el-table-column>
      <el-table-column align="center" prop="cardId" label="证件号">
      </el-table-column>
      <el-table-column align="center" prop="mobile" label="手机号">
      </el-table-column>
      <el-table-column align="center" prop="ptJf"  label="可用积分余额">
        <!--<template slot-scope="scope">-->
          <!--<span>{{scope.row.acctInt/100 }}</span>-->
        <!--</template>-->
      </el-table-column>
      <el-table-column align="center" prop="yuzhiJf"  label="可预支积分">
      </el-table-column>
      <!--<el-table-column align="center" prop="goodsValue" label="可预支积分余额">-->
      <!--</el-table-column>-->
      <!--<el-table-column align="center" prop="goodsValue" label="已使用积分">-->
      <!--</el-table-column>-->
      <el-table-column align="center" prop="recNum" label="推荐员工号">
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createDate | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="180" v-if="mall_customer_jfmx  || mall_customer_del ">
        <template align="left" slot-scope="scope">

          <el-button style="float: left" v-if="mall_customer_jfmx" size="mini" type="primary" @click="toMallInfo(scope.row)">积分明细</el-button>
          <!--<el-button v-if="mall_customer_jfmx" size="mini" type="primary" @click="toMallInfo(scope.row)">可预支积分分明细</el-button>-->
          <el-button style="float: left" v-if="mall_customer_del" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.current" :page-size="listQuery.size" :page-sizes="[10, 40, 80, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>


    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="80%" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <div class="search-container">
          <div class="search-inp-container">
            <el-date-picker
              v-model="jfListQuery.startDate"
              type="datetime"
              format="yyyyMMdd"
              value-format="yyyyMMdd" style="width:300px"
              placeholder="选择开始时间">
            </el-date-picker>
            <el-date-picker
              v-model="jfListQuery.endDate"
              type="datetime"
              format="yyyyMMdd"
              value-format="yyyyMMdd" style="width:300px"
              placeholder="选择结束时间">
            </el-date-picker>
            </div>
          <el-button class="search-btn" type="primary" icon="el-icon-search" @click="handleSearchNew">查询</el-button>
          <el-button class="search-btn" :autofocus="true" icon="el-icon-refresh" @click="refreshHandleNew">刷新</el-button>
        </div>
        <el-table :key='tableKey' :data="jfList" v-loading="listLoading" border fit highlight-current-row >

          <el-table-column align="center" prop="pbkNum" label="证件号">
          </el-table-column>
          <el-table-column align="center" prop="telNo" label="手机号">
          </el-table-column>
          <!--<el-table-column align="center" prop="name" label="操作人" >-->
          <!--</el-table-column>-->
          <el-table-column align="center" prop="tranType" label="获取/消费">
          </el-table-column>
          <el-table-column align="center" prop="intType" label="积分类型">
            <template slot-scope="scope">
              <span>{{scope.row.intType | typeFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="积分">
            <template slot-scope="scope">
              <span>{{scope.row.tranInt/100 }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="dateString" label="创建时间">
          </el-table-column>

        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination @size-change="handleSizeChangeJF" @current-change="handleCurrentChangeJF" :current-page.sync="jfListQuery.current" :page-size="jfListQuery.size" :page-sizes="[10, 40, 80, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total2">
          </el-pagination>
        </div>


      </el-form>
    </el-dialog>


  </div>
</template>

<script>
import { fetchList, delObj, fetchUserJfList, exportCustomer } from '@/api/mallcustomer'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {

      tableKey: 0,
      listLoading: false,
      list: [],
      jfList: [], // 积分明细List
      listQuery: {
        current: 1,
        size: 10,
        cardId: '',
        mobile: '',
        name: '',
        descs: 'create_date'
      },
      jfListQuery: {// 积分明细List查询条件
        current: 1,
        size: 10,
        startDate: '',
        endDate: '',
        pbkNum: '',
        telNo: '',
        // descs: 'create_date'
      },
      FormArr: [
        {
          index: 0,
          value: '',
          specificationName: '',
          goodsValue: '',
          stock: '',
          changeCode: ''
        }
      ],
      total: 0,
      total2:0,
      mall_customer_jfmx: false,
      mall_customer_del: false,
      mall_customer_export: false,
      sys_user_delete: false,
      sys_user_select: false,
      dialogFormVisible: false,
      form: {

      },
      rules: {

      },
      textMap: {
        update: '编辑',
        create: '积分明细'
      },
      dialogStatus: '',
      isDisabled: {
        0: false,
        1: true
      },
      statusOptions: ['0', '1'],
      dialogDeptVisible: false,
      treeDeptData: [],
      checkedKeys: [],
      defaultProps: {
        children: 'childrens',
        label: 'name'
      }
    }
  },

  components: {},
  filters: {
    typeFilter(intType) {
      const intTypeMap = {
        1: '可用积分',
        2: '超期未兑换',
        3: '可预支积分',
        5: 'VIP积分'
      }
      return intTypeMap[intType]
    },
    statusFilter(status) {
      const statusMap = {
        0: '有效',
        1: '无效',
        9: '锁定'
      }
      return statusMap[status]
    },
    isVip(status) {
      const statusMap = {
        0: '否',
        1: '是'
      }
      return statusMap[status]
    }
  },
  computed: {
    ...mapGetters(['permissions'])
  },

  mounted() {
    this.getList()
    this.mall_customer_jfmx = this.permissions['/mall/customer:jfmx']
    this.mall_customer_del = this.permissions['/mall/customer:del']
    this.mall_customer_export = this.permissions['/mall/customer:export']
    this.sys_user_delete = this.permissions['/admin/user:delete']
    this.sys_user_select = this.permissions['/admin/user:select']
  },

  methods: {
    getList() {
      this.listLoading = true
      this.listQuery.isAsc = false
      fetchList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        if (this.list != null && this.list != undefined) {
          for (let i = 0; i < this.list.length; i++) {
            let dataList = this.list[i]
            if (dataList.intCifInfoVoList != null && dataList.intCifInfoVoList != undefined) {
              for (let j = 0; j < dataList.intCifInfoVoList.length; j++) {
                if (dataList.intCifInfoVoList[j].intType == 1) {
                  this.list[i].ptJf = dataList.intCifInfoVoList[j].acctInt / 100
                } else if (dataList.intCifInfoVoList[j].intType == 3) {
                  this.list[i].yuzhiJf = dataList.intCifInfoVoList[j].acctInt / 100
                }
                if (this.list[i].ptJf === undefined || this.list[i].ptJf === null) {
                  this.list[i].ptJf = 0
                }
                if (this.list[i].yuzhiJf === undefined || this.list[i].yuzhiJf === null) {
                  this.list[i].yuzhiJf = 0
                }
              }
            } else {
              this.list[i].ptJf = 0
              this.list[i].yuzhiJf = 0
            }
          }
        }
        this.listLoading = false
      })
    },
    // 查询用户积分明细
    getUserJfList() {
      // this.listLoading = true
      // this.jfListQuery.isAsc = false
      const _this = this
      fetchUserJfList(this.jfListQuery).then(response => {
        _this.jfList = response.data.records
        for (let i = 0; i < _this.jfList.length; i++) {
          if (_this.jfList[i].tranType === '02') {
            _this.jfList[i].tranType = '生成积分'
          } else {
            _this.jfList[i].tranInt = -_this.jfList[i].tranInt
          }
        }
        this.total2 = response.data.total
        this.$forceUpdate()
        this.listLoading = false
      })
    },
    refreshHandle() {
      this.listQuery.current = 1
      this.listQuery.size = 10
      this.listQuery.username = ''
      this.getList()
    },
    refreshHandleNew() {
      this.jfListQuery.current = 1
      this.jfListQuery.size = 10
      this.getUserJfList()
    },
    handleDelete(row) {
      this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        delObj(row.customerId)
          .then(() => {
            this.getList()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
          .cache(() => {
            this.$notify({
              title: '失败',
              message: '删除失败',
              type: 'error',
              duration: 2000
            })
          })
      })
    },

    handleSearch() {
      this.listQuery.current = 1
      this.getList()
    },
    handleExport() {
      var _this = this
      _this.listLoading = true
      exportCustomer(this.listQuery).then(response => {
        const data = response
        const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        const now = new Date() // 时间戳为10位时，需要乘1000
        const year = now.getFullYear()
        const month = (now.getMonth() + 1) > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
        const date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
        link.setAttribute('download', year + '-' + month + '-' + date + '注册用户信息导出.xls')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        _this.listLoading = false
      })
    },
    handleSearchNew() {
      this.jfListQuery.current = 1
      this.getUserJfList()
    },
    handleSizeChange(val) {
      this.listQuery.size = val
      this.getList()
    },
    handleSizeChangeJF(val) {
      this.jfListQuery.size = val
      this.getUserJfList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    handleCurrentChangeJF(val) {
      this.jfListQuery.current = val
      this.getUserJfList()
    },
    cancel(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    Delete(index) {
      this.FormArr.splice(index, 1)
      for (const i in this.FormArr) {
        this.FormArr[i].index = i
      }
    },
    // 跳转积分明细列表
    toMallInfo: function(obj) {
      if (obj.cardId == '' || obj.cardId == undefined || obj.cardId == null) {
        this.$alert('用户证件号为空无法查询')
        return
      }
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.jfListQuery.pbkNum = obj.cardId
      this.jfListQuery.startDate = undefined
      this.jfListQuery.endDate = undefined
      this.getUserJfList( obj.cardId,obj.mobile)
    }

  }
}

</script>


<style lang='scss' scoped>
.w347 {
  width: 100%;
}
</style>
